<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>17商城</title>
  <link type="text/css" th:href="@{/css/css.css}" rel="stylesheet"/>
</head>

<body>
<div class="mianCont">
  <div th:replace="common/top :: ttoopp"></div>
  <div class="pnt">
    <div class="pntLeft">
      <h2 class="Title">所有商品分类
        <ul class="InPorNav" id="categoryUL">
        </ul>
      </h2>
    </div><!--pntLeft/-->
    <div class="pntRight">
      <ul class="nav">
        <li><a href="index.html">商城首页</a></li>
        <li class="navCur"><a href="product.html">促销中心</a></li>
        <li><a href="login.html">会员中心</a></li>
        <li><a href="help.html">帮助中心</a></li>
        <div class="clears"></div>
        <div class="phone">TEL：021-12345678</div>
      </ul><!--nav/-->
    </div><!--pntRight/-->
    <div class="clears"></div>
  </div><!--pnt/-->
  <div class="positions">
    当前位置：<a href="index.html">首页</a> &gt; <a href="#" class="posCur">促销商品</a>
  </div><!--positions/-->
  <div class="cont">
    <div class="contRight" style="border:0;">
      <div class="proBox">
        <div id="tsShopContainer">
          <div id="tsImgS">
          </div>
          <div id="tsPicContainer">
            <div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
            <div id="tsImgSCon">
              <ul id="imgsUL">
              </ul>
            </div>
            <div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
          </div>
          <img class="MagicZoomLoading" width="16" height="16" src="images/loading.gif" alt="Loading..."/>
          <script src="js/ShopShow.js"></script>
        </div><!--tsShopContainer/-->
        <div class="proBoxRight">
          <h3 class="proTitle">17 饮料杯 250ml 41121 50个/袋</h3>
          <div>商品编号： 334011</div>
          <div>会员价：<strong class="red">¥7.20</strong></div>
          <div>单位：袋</div>
          <div>库存：<strong class="red">[有货] </strong> 从上海发货</div>
          <sku></sku>
          <div id="specsDiv">
          </div>
          <div class="shuliang2">
            数量： <input type="text" value="1"/>
          </div><!--shuliang2/-->
          <div class="gc">
            <a href="order.html"><img src="images/goumai.png" width="117" height="36"/></a>&nbsp;&nbsp;
            <a href="#"><img src="images/shoucang.png" width="117" height="36"/></a>
          </div><!--gc/-->
        </div><!--proRight/-->
        <div class="clears"></div>
      </div><!--proBox/-->
      <ul class="fangyuan">
        <li>商品描述</li>
        <li>商品参数</li>
        <li>商品评论</li>
        <li>商品晒图</li>
        <div class="clears"></div>
      </ul><!--fangyuan/-->
      <div class="fangList">
        <div class="fangPar">
          乐购超市旁，未来地铁14号线沿线地段，规划中上海四大商业附中心—真如商业副中心，婚房精装电梯两房。让您一步到位<br/>
          很荣幸栗见能借此机会给您问好，为您介绍此房.<br/>
          超稀缺地铁双南两房，全明户型，满五唯一，业主急需资金周转特急卖。<br/>
          Information of Vernal Garden 满庭芳花园 <br/>
          Location:<br/>
          Located close to Gubei Carrefour and the Hongqiao Airport, 15 mins drive to international schools and downtown area.<br/>
          Description:<br/>
          It offers a full range of accommodations including freestanding houses, semi-detached houses and condominiums. The units are very spacious, well decorated and fully furnished. Resident can enjoy a complete range of onsite <br/>recreational facilities. <br/>
          Facilities:<br/>
          Indoor swimming door, gym, sauna, spa, squash, cafe, childrens playground, restaurant, convenience store, snooker, basketball court. <br/>
          Tv Channel:<br/>
          HBO，TVB，BBC，DISCOVERY，CINEMAX，
        </div><!--fangPar/-->
        <img src="images/ban1.jpg" width="756" height="310"/>
      </div><!--fangList/-->
      <div class="fangList">
        商品参数
      </div><!--fangList/-->
      <div class="fangList">
        商品评论
      </div><!--fangList/-->
      <div class="fangList">
        <img src="images/rdPro1.jpg" width="132" height="129"/><br/><br/>
        <img src="images/rdPro2.jpg" width="132" height="129"/><br/><br/>
        <img src="images/rdPro3.jpg" width="132" height="129"/><br/><br/>
        <img src="images/rdPro4.jpg" width="132" height="129"/><br/><br/>
        <img src="images/rdPro5.jpg" width="132" height="129"/><br/><br/>
      </div><!--fangList/-->
    </div><!--contRight/-->
    <div class="clears"></div>
  </div><!--cont/-->
  <div th:replace="common/foot :: ffoooott"></div>
</div><!--mianCont/-->
<a href="#" class="backTop">&nbsp;</a>
</body>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/js.js}"></script>
<script type="text/javascript" th:src="@{/js/global.js}"></script>
<script type="text/javascript" th:src="@{js/MagicZoom.js}"></script>
<script type="text/javascript">
$(function () {
  //热门搜索
  getSkuByHot()

  //显示商品类别
  getCategoryList()

  //sku的id
  let id = getUrlParms('id')
  let pageNum = PAGE_NUM
  let pageSize = PAGE_SIZE
  $.get(base_url + 'sku/skuDetail/' + id + '/' + pageNum + '/' + pageSize, function (res) {
    console.info(res)
    if (res.code == 200) {
      let sku = res.data.sku
      let pics = JSON.parse(sku.pics)
      // console.info(pics)
      let tmp0 = '<a href="' + IMG_SERVER + pics[0] + '" title="Images" class="MagicZoom" id="MagicZoom">'
      tmp0 += '<img width="300" height="300" src="' + IMG_SERVER + pics[0] + '"/>'
      tmp0 += '</a>'
      $('#tsImgS').empty().append(tmp0)

      let tmp1 = '<li onClick="showPic(0)" rel="MagicZoom" className="tsSelectImg">'
      tmp1 += '<img height="42" width="42" src="' + IMG_SERVER + pics[0] + '" tsImgS="' + IMG_SERVER + pics[0] + '"/>'
      tmp1 += '</li>'
      for (let i = 1; i < pics.length; i++) {
        tmp1 += '<li onclick="showPic(' + i + ')" rel="MagicZoom"><img height="42" width="42" src="' + IMG_SERVER + pics[i] + '" tsImgS="' + IMG_SERVER + pics[i] + '"/></li>'
      }

      $('#imgsUL').empty().append(tmp1)

      //sku
      let specs = JSON.parse(sku.specs)
      for (let i = 0; i < specs.length; i++) {
        let spec = specs[i]
        let tmp2 = '<div style="margin-bottom: 8px;">'
        if (spec.type == 1 || spec.type == 2) {
          tmp2 += spec.name + '：<ul class="rongliang">'
        } else if (spec.type == 3) {
          tmp2 += spec.name +'：<select>'
        }
        for (let j = 0; j < spec.value.length; j++) {
          if (spec.type == 1) {
            tmp2 += '<li><img src="' + spec.value[i].img + '"/>' + spec.value[j].info + '</li>'
          } else if (spec.type == 2) {
            tmp2 += '<li style="width:163px;">' + spec.value[j].info + '</li>'
          } else if (spec.type == 3) {
            tmp2 += '<option value ="'+spec.value[j].id+'">'+spec.value[j].info+'</option>'
          }
        }
        if (spec.type == 1 || spec.type == 2) {
          tmp2 += '<div class="clears"></div>'
          tmp2 += '</ul>'
        } else if (spec.type == 3) {
          tmp2 += '</select>'
        }

        tmp2 += '</div>'
        $('#specsDiv').append(tmp2)
      }


    }
  })


})
</script>
</html>
